<template>
  <div class="topbar">
    <!-- Start row -->
    <div class="row align-items-center">
      <!-- Start col -->
      <div class="col-md-12 align-self-center">
        <div class="togglebar">
          <ul class="list-inline mb-0">
            <li class="list-inline-item">
              <div class="menubar">
                <a class="menu-hamburger" href="javascript:void();">
                  <img
                    src="@/assets/images/svg-icon/collapse.svg"
                    class="img-fluid menu-hamburger-collapse"
                    alt="collapse"
                  />
                  <img
                    src="@/assets/images/svg-icon/close.svg"
                    class="img-fluid menu-hamburger-close"
                    alt="close"
                  />
                </a>
              </div>
            </li>
            <li class="list-inline-item">
              <div class="searchbar">
                <form>
                  <div class="input-group">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Search"
                      aria-label="Search"
                      aria-describedby="button-addon2"
                    />
                    <div class="input-group-append">
                      <button class="btn" type="submit" id="button-addon2">
                        <img
                          src="@/assets/images/svg-icon/search.svg"
                          class="img-fluid"
                          alt="search"
                        />
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </li>
          </ul>
        </div>
        <div class="infobar">
          <ul class="list-inline mb-0">
            <li class="list-inline-item">
              <div class="notifybar">
                <a
                  href="javascript:void(0)"
                  id="infobar-notifications-open"
                  class="infobar-icon"
                >
                  <img
                    src="@/assets/images/svg-icon/notifications.svg"
                    class="img-fluid"
                    alt="notifications"
                  />
                  <span class="live-icon"></span>
                </a>
              </div>
            </li>
            <li class="list-inline-item">
              <div class="settingbar">
                <a
                  href="javascript:void(0)"
                  id="infobar-settings-open"
                  class="infobar-icon"
                >
                  <img
                    src="@/assets/images/svg-icon/settings.svg"
                    class="img-fluid"
                    alt="settings"
                  />
                </a>
              </div>
            </li>
            <li class="list-inline-item">
              <div class="languagebar">
                <div class="dropdown">
                  <a
                    class="dropdown-toggle"
                    href="#"
                    role="button"
                    id="languagelink"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                    ><i class="flag flag-icon-us flag-icon-squared"></i
                  ></a>
                  <div
                    class="dropdown-menu dropdown-menu-right"
                    aria-labelledby="languagelink"
                  >
                    <a class="dropdown-item" href="#"
                      ><i class="flag flag-icon-us flag-icon-squared"></i
                      >English</a
                    >
                    <a class="dropdown-item" href="#"
                      ><i class="flag flag-icon-cn flag-icon-squared"></i
                      >Chinese</a
                    >
                    <a class="dropdown-item" href="#"
                      ><i class="flag flag-icon-ru flag-icon-squared"></i
                      >Russian</a
                    >
                    <a class="dropdown-item" href="#"
                      ><i class="flag flag-icon-es flag-icon-squared"></i
                      >Spanish</a
                    >
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- End col -->
    </div>
    <!-- End row -->
  </div>
</template>

<script>
export default {
  name: "ToolBar",
  components: [],
  props: {
    msg: String,
  },
};
</script>

<style>
</style>